<template>
  <div id="completion" class="completion" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    const vm = this
    vm.init()
    window.addEventListener('resize', vm.winResize)
  },
  beforeDestroy() {
    const vm = this
    window.removeEventListener('resize', vm.winResize)
  },
  methods: {
    init() {
      const vm = this
      vm.myChart = echarts.init(document.getElementById('completion'))
      vm.myChart.setOption(vm.getOption())
    },
    winResize() {
      const vm = this
      vm.myChart && vm.myChart.resize()
    },
    getOption() {
      return {
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{b}: {c} ({d}%)'
        // },
        color: ['#5B9BD5', '#ED7D31'],
        title: {
          text: '任务完成情况',
          left: 'center',
          top: '45%',
          textStyle: {
            color: '#333',
            fontSize: 32,
            align: 'center'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['55%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inside',
              formatter: '{b}: \n{c} ({d}%)',
              backgroundColor: '#ffffff',
              borderColor: '#333',
              padding: 5
            },
            data: [
              { value: 80, name: '已完成' },
              { value: 20, name: '未完成' }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.completion {
  width: 100%;
  height: 400px;
}
</style>
